<template>
  <div style="position: relative;" v-show="flag">
    <div class="ContinuPlay_box" @touchstart="TouchStart" @touchmove="TouchMove" @touchend="TouchEnd">
      <div class="items_box">
        <div v-for="(item, index) in banners" class="slide" :key="index" ref="op">
          <a rel="external nofollow">
            <img :src="'http://43.138.15.137:4000' + item.img" v-if="img === 0"  />
            <img :src="item.src" v-else style="width: 94%;margin-left: 3%;" />
          </a>
        </div>
      </div>
      <div class="points_box" v-show="dian === 0">
        <div class="points">
          <div class="each_point" v-for="(item, index) in banners.length" :key="index"
            :class="{ current: index == CurrentImg }"></div>
        </div>
      </div>
    </div>
    <div class="cur" v-show="isshow">{{ CurrentImg + 1 }} / 3</div>
  </div>
</template>
<script>
export default {
  //接受父级组件传过来的banners数据
  props: {
    banners: { type: Array, required: true },
    // 判断是那种图片上传格式
    img: { type: Number, default: 0 },
    // 小圆点是否显示
    dian: { type: Number, default: 0 },
    // 分页是否显示
    isshow: { type: Boolean, default: false },
    // 轮播图什么时候显示
    flag: { type: Boolean, default: true }
  },
  data() {
    return {
      //轮播图宽度
      bannerwidth: 0,
      //触摸开始的点的横坐标
      StartPoint: 0,
      //触摸结束的点的横坐标
      EndPoint: 0,
      //StartPoint与EndPoint的差值
      MoveLength: 0,
      //当前轮播图的索引
      CurrentImg: 0,
      //判断是否处于自动轮播
      isPlaying: true,
      //轮播定时器
      playTimer: null,
    }
  },
  methods: {
    TouchStart(event) {
      //停止轮播
      clearInterval(this.playTimer)
      //获取触摸的开始点
      this.StartPoint = event.changedTouches[0].pageX
    },
    TouchMove(event) {
      //获取触摸的结束点
      this.EndPoint = event.changedTouches[0].pageX
      this.slidings()
    },
    TouchEnd() {
      this.Jump()
      //开始轮播
      this.startPlay()
    },
    // 判断滑动距离是否超过30%，超过则跳转下一张，否则不跳转
    Jump() {
      const currentimg = document.getElementsByClassName('slide')
      //滑动超过轮播图宽度的百分之30并且，则跳转下一张，否则不跳转
      if (this.MoveLength > 0) {
        if (this.CurrentImg === this.banners.length - 1) {
          // 就跑到第一页
          currentimg[0].style.marginLeft = '0px'
          this.CurrentImg = 0
        } else {
          if (this.MoveLength > this.bannerwidth * 0.3) {
            this.CurrentImg++
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          } else {
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          }
        }
      } else if (this.MoveLength < 0) {
        if (this.CurrentImg === 0) {
          currentimg[0].style.marginLeft = - (this.banners.length - 1) * this.bannerwidth + 'px'
          this.CurrentImg = 2
        } else {
          if (-this.MoveLength > this.bannerwidth * 0.3) {
            this.CurrentImg--
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          } else {
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          }
        }
      }
    },
    //slidings()方法用于处理在滑动过程中，轮播图跟着手指滑动的距离移动
    slidings() {
      //判断是否自动滑动
      // StartPoint 触摸的开始点
      // EndPoint   触摸的结束点
      // 如果触摸的开始点和结束点相同则未滑动
      if (this.StartPoint === this.EndPoint) {
        return
      }
      // 否则就是滑动距离等于开始点-结束点
      this.MoveLength = this.StartPoint - this.EndPoint
      console.log('滑动距离', this.MoveLength)
      //操作DOM，获取轮播图对象标签
      const currentimg = document.getElementsByClassName('slide')
      console.log('banner', currentimg);
      //获取轮播图的宽度
      this.bannerwidth = currentimg[0].offsetWidth
      //如果滑动范围大于0(即右滑了)
      if (this.MoveLength > 0) {
        currentimg[0].style.marginLeft = -this.MoveLength - this.CurrentImg * this.bannerwidth + 'px'
        //如果滑动范围大于0(即左滑了)
      } else if (this.MoveLength < 0) {
        // 否则就跑到当前页
        currentimg[0].style.marginLeft = -this.MoveLength - this.CurrentImg * this.bannerwidth + 'px'
      }
    },
    //开启自动轮播
    startPlay() {
      if (this.banners !== null) {
        clearInterval(this.playTimer)
        this.playTimer = setInterval(() => {
          if (this.CurrentImg === this.banners.length - 1) {
            this.CurrentImg = -1
          }
          this.CurrentImg++
          const currentimg = document.getElementsByClassName('slide')
          this.bannerwidth = currentimg[0].offsetWidth
          currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          console.log(currentimg[0].style.marginLeft);
          currentimg[0].style.transition = 'all 1s ease'
        }, 2000)
      }

    },
  },
  // 组件挂载到实例上之后自动轮播
  mounted() {
    //页面挂在完毕自动开启轮播
    this.startPlay()
  },
  // 组件销毁之前，清除定时器
  beforeDestroy() {
    clearInterval(this.playTimer)
  }
}
</script>
<style scoped>
.cur {
  position: absolute;
  top: -170px;
  left: 180px;
  color: #fff;
}

.ContinuPlay_box {
  /* overflow: hidden; */
  position: relative;
}

.ContinuPlay_box .items_box {
  display: flex;
}

.ContinuPlay_box .slide {
  flex-shrink: 0;
  width: 100%;
}

.ContinuPlay_box .slide img,
.ContinuPlay_box .slide a {
  width: 100%;
  height: 100%;
}

.points_box {
  display: flex;
  justify-content: center;
}

.points {
  display: flex;
  width: 33%;
  height: 10px;
  position: absolute;
  bottom: 8px;
  justify-content: space-evenly;
}

.points .each_point {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #fff;
  opacity: 0.7;
}

.points .current {
  background: #87ceeb;
}
</style>
